<template>
	<view class="o_d">
		<view class="bg_1" v-if="list.order_status==1">
			<view>下单成功</view>
			<view class="m-t">等待回收员确认上门时间</view>
		</view>
		<view class="bg_1" v-if="list.order_status==2">
			<view>已完成</view>
			<view class="m-t">订单已完成</view>
		</view>
		<view class="bg_1" v-if="list.order_status==3">
			<view>已取消</view>
			<view class="m-t">原因：不小心点错了</view>
		</view>
		<view class="bg_2 flex flex-x-b">
			<view>预估重量</view>
			<view>{{list.service_name}}</view>
		</view>
		<view class="bg_2 flex flex-y-c" v-if="list.order_status==1">
			<view class="image_1">
				<image src="../../static/10.png" alt="">
			</view>
			<view>师傅已接单，请您耐心等待...</view>
		</view>
		<view class="bg_2 flex flex-y-c" v-if="list.order_status==2">
			<view class="image_1">
				<image src="../../static/10.png" alt="">
			</view>
			<view>师傅上门回收已完成</view>
		</view>
		<view class="bg_2">
			<view class="h">{{list.addressDefault.name}}{{list.addressDefault.phone}}</view>
			<view class="h">
			{{list.addressDefault.region.province}}
			{{list.addressDefault.region.city}}
			{{list.addressDefault.region.region}}
			{{list.addressDefault.detail}}
			</view>
		</view>

		<view class="bg_2">
			<view class="flex flex-x-b h">
				<view>订单编号</view>
				<view>{{list.order_no}}</view>
			</view>
			<view class="flex flex-x-b h">
				<view>下单时间</view>
				<view>{{list.create_time}}</view>
			</view>
		</view>
		<view class="f_btn " @click="del" v-if="list.order_status==1">
			取消订单
		</view>
		<u-select v-model="show" :list="r_list" confirm-color='#66B347' value-name='id' label-name='name' @confirm="confirm"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import * as Api from '@/api/recovery'
	export default {
		data() {
			return {
				order_no: '',
				list:{},
				r_list:[],
				show:false,
				id:''
			}
		},
		onLoad(options) {
			this.order_no = options.id;
			this.getOrderDetail()
		},
		methods: {
			getOrderDetail() {
				const app = this
				// 设置列表数据
				Api.readOrder({
						order_no: this.order_no
					})
					.then(result => {
						this.list = result.data.detail
						this.id=this.list.id
						console.log(this.list)
					})
					.finally()
			},
			del() {
				Api.reasonOrder({})
					.then(result => {
						this.r_list = result.data.list
						console.log(this.r_list)
					})
					.finally()
				
				uni.showModal({
					title: '取消订单',
					content: '您的专属回收员已快马加鞭的赶来，请您准备好要处理的物品，耐心等待',
					confirmText: '再等一会儿',
					cancelText: '继续取消',
					confirmColor: '#66B347',
					success: (res) => {
						if (res.confirm) {
							console.log('comfirm') //点击确定之后执行的代码
						} else {
							this.show=true
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})
			},
			confirm(e) {
				console.log(e);
				Api.cancelOrder({
					id:this.id,
					describe_id:e[0].value,
					describe:e[0].label
				})
					.then(result => {
						this.$refs.uToast.show({
							title: '取消成功',
							type: 'success',
							url: '/pages/order/index'
						})
					})
					.finally()
				
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
	}

	.flex-x-b {
		justify-content: space-between;
	}

	.flex-y-c {
		align-items: center;
	}

	.h {
		height: 50rpx;
		line-height: 50rpx;
	}

	.o_d {
		padding: 24rpx 32rpx;
	}

	.bg_1 {
		width: 686rpx;
		background: #66B347;
		border-radius: 10rpx;
		padding: 32rpx;
		color: #fff;
		font-size: 26rpx;
		margin-bottom: 30rpx;
	}

	.bg_2 {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 32rpx;
		font-size: 26rpx;
		margin-bottom: 30rpx;
	}

	.m-t {
		margin-top: 40rpx;
	}

	.image_1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.image_1 image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.f_btn {
		width: 161rpx;
		height: 53rpx;
		border: 1rpx solid #C4C4C4;
		border-radius: 27rpx;
		text-align: center;
		line-height: 53rpx;
		margin: 0 auto;
	}
	
	.content{
		padding: 30rpx;
	}
</style>
